<template>
  <div class="return-visit-details">
    <div class="return-visit-wrapper">
      <!-- 用户信息 -->
      <div class="section">
        <div class="section-title">用户信息</div>
        <div class="custInfo-info">
          <div class="custInfo-item">
            <div class="custInfo-label">用电户编号：</div>
            <div class="custInfo-value">{{ userInfo.accountNo }}</div>
          </div>
          <div class="custInfo-item">
            <div class="custInfo-label">证件类型：</div>
            <div class="custInfo-value">{{ userInfo.certType }}</div>
          </div>
          <div class="custInfo-item">
            <div class="custInfo-label">联系类型：</div>
            <div class="custInfo-value">{{ userInfo.contactType }}</div>
          </div>
          <div class="custInfo-item">
            <div class="custInfo-label">客户名称：</div>
            <div class="custInfo-value">{{ userInfo.customerName }}</div>
          </div>
          <div class="custInfo-item">
            <div class="custInfo-label">证件号码：</div>
            <div class="custInfo-value">{{ userInfo.certNo }}</div>
          </div>
          <div class="custInfo-item">
            <div class="custInfo-label">客户联系人：</div>
            <div class="custInfo-value">{{ userInfo.linkman }}</div>
          </div>
          <div class="custInfo-item">
            <div class="custInfo-label">是否是重要客户：</div>
            <div class="custInfo-value">{{ userInfo.important }}</div>
          </div>
          <div class="custInfo-item">
            <div class="custInfo-label">用电地址：</div>
            <div class="custInfo-value">{{ userInfo.powerAddr }}</div>
          </div>
          <div class="custInfo-item">
            <div class="custInfo-label">客户电话：</div>
            <div class="custInfo-value">{{ userInfo.phone }}</div>
            <el-button type="primary" :icon="PhoneFilled">电话</el-button>
            <el-button type="primary" plain @click="handleSpeechFill" :loading="isLoading" :disabled="isLoading">
              {{ isLoading ? '处理中...' : '语音识别' }}
            </el-button>
          </div>
        </div>
      </div>

      <!-- 回访内容 -->
      <div class="section">
        <div class="section-title">回访内容</div>
        <div class="section-info">
          <el-form :model="form" label-width="170px" label-position="left">
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="回访标志：" label-width="130px">
                  <el-radio-group v-model="form.visitStatus">
                    <el-radio label="成功">成功</el-radio>
                    <el-radio label="失败">失败</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="系统送电时间：">
                  <span class="plain-text">{{ form.systemPowerOnDate }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否发送送电短信：">
                  <span class="plain-text">{{ form.sendSms ? '是' : '否' }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="外拨失败原因：" label-width="130px">
                  <el-radio-group v-model="form.failReason">
                    <el-radio label="拒接">拒接</el-radio>
                    <el-radio label="未接">未接</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="实际送电时间：">
                  <el-date-picker v-model="form.actualPowerOn" type="date" placeholder="请选择实际送电时间"
                    style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>

              <el-col :span="8">
                <el-form-item label="失败次数：" label-width="130px">
                  <span class="plain-text">{{ form.failCount }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户是否提供送电时间：">
                  <el-radio-group v-model="form.customerProvidedTime">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>

              <el-col :span="8">
                <el-form-item label="客户满意度：" label-width="130px">
                  <el-select v-model="form.satisfaction" placeholder="请选择" style="width: 100%">
                    <el-option label="满意" value="满意" />
                    <el-option label="一般" value="一般" />
                    <el-option label="不满意" value="不满意" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="送电时间是否偏差：">
                  <span class="plain-text">{{ form.isDeviation }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>

              <el-col :span="8">
                <el-form-item label="问题类型：" label-width="130px">
                  <!-- <el-select v-model="form.issueType" placeholder="请选择" style="width: 100%">
                    <el-option label="未去现场勘查" value="未去现场勘查" />
                    <el-option label="服务问题" value="服务问题" />
                    <el-option label="运行问题" value="运行问题" />
                  </el-select> -->
                  <el-input v-model="form.issueType" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="送电时间偏差自然日：">
                  <span class="plain-text">{{ form.deviationDays }}天</span>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>

              <el-col :span="24">
                <el-form-item label="客户意见：" label-width="130px">
                  <el-input v-model="form.customerOpinion" type="textarea" :rows="3" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注：" label-width="130px">
                  <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>

      <!-- 日志 -->
      <div class="section-end">
        <div class="section-title">日志</div>
        <div class="section-info">
          <div class="log-item" v-for="(log, idx) in logs" :key="idx">
            <span class="log-item-circel"></span>
            <span class="log-item-time">{{ log.time }}</span>
            <span class="log-item-text">{{ log.content }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 固定底部按钮 -->
    <div class="fixed-bottom-buttons">
      <div class="button-container">
        <el-button type="default" @click="() => { }">保存</el-button>
        <el-button type="primary" @click="() => { }">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElButton, ElForm, ElRow, ElCol, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElRadioGroup, ElRadio, ElMessage } from 'element-plus'
import { PhoneFilled } from '@element-plus/icons-vue'

type VisitForm = {
  visitStatus: string
  systemPowerOnDate: string
  sendSms: boolean
  failReason: string
  actualPowerOn: string | Date
  customerProvidedTime: string | number
  failCount: number
  isDeviation: string
  deviationDays: number
  satisfaction: string
  issueType: string
  customerOpinion: string
  remark: string
}

const userInfo = ref({
  accountNo: '42199268331769',
  certType: '居民身份证',
  contactType: '',
  customerName: '陈连双',
  certNo: '',
  linkman: '陈连双',
  important: "非重要客户",
  powerAddr: '湖北省恩施土家族苗族自治州咸丰县唐崖镇道联溪村十组10号豪猪洞',
  phone: '15868753492'
})

const form = ref<VisitForm>({
  visitStatus: '',
  systemPowerOnDate: '',
  sendSms: false,
  failReason: '',
  actualPowerOn: '',
  customerProvidedTime: '',
  failCount: 0,
  isDeviation: '',
  deviationDays: 0,
  satisfaction: '',
  issueType: '',
  customerOpinion: '',
  remark: ''
})

const logs = ref([
  { time: '2025-04-02 08:32:42', content: '营销系统推送营业厅受理工单，工单编号：4225040210002763' }
])

// 取出json结构数据
function extractJsonFromString(str) {
  // 使用正则表达式匹配以```json开头，```结尾的代码块
  const jsonMatch = str.match(/```json([\s\S]*?)```/);

  if (!jsonMatch || jsonMatch.length < 2) {
    throw new Error("未找到JSON代码块");
  }

  // 提取JSON部分并去除前后空白
  const jsonStr = jsonMatch[1].trim();

  try {
    // 解析JSON字符串为JavaScript对象
    const jsonObj = JSON.parse(jsonStr);
    return jsonObj;
  } catch (error) {
    throw new Error(`解析JSON失败: ${error}`);
  }
}
/**
 * 将中文日期字符串（如2025年9月5日下午）转换为YYYY-MM-DD格式
 * @param chineseDate 中文日期字符串
 * @returns 格式化后的日期字符串
 */
function formatChineseDate(chineseDate: string): string {
  // 使用正则表达式提取年、月、日
  const match = chineseDate.match(/(\d{4})年(\d{1,2})月(\d{1,2})日/);

  if (!match) {
    throw new Error(`无效的日期格式: ${chineseDate}`);
  }

  // 提取年、月、日
  const year = match[1];
  const month = match[2].padStart(2, '0'); // 确保月份为两位数
  const day = match[3].padStart(2, '0');   // 确保日期为两位数

  // 组合为YYYY-MM-DD格式
  return `${year}-${month}-${day}`;
}
// 添加百炼平台API相关配置
const WORKFLOW_ID = '073ba95746c5439cba996444d104222e'
const BAILIAN_API_URL = `https://dashscope.aliyuncs.com/api/v1/apps/${WORKFLOW_ID}/completion` // 假设的百炼平台API地址
// 添加加载状态
const isLoading = ref(false)

// 添加调用百炼工作流的方法
const handleSpeechFill = async () => {
  isLoading.value = true
  try {
    // 构建请求体
    const data = {
      // wkOrderNo: "20250820153144",
      // qlWkOrderNo: "20250820153144",
      // qlWkOrderType: "业扩工单",
      // qlWkOrderClass: "低压非居民新装",
      input: {
        prompt: "你好",
        biz_params: {
          qlContent: "业务类型：回访 业扩工单编号：20250114090530 被质检工单分类：低压非居民新装 供电单位：高新区供电中心 供电所：高新漳河供电所 是否重要客户：否 客户姓名： 王芳 对话内容： 发言人 2 00:29 你好，我你好，我是国网香港供电公司的。请问您是刘慧敏吗？我这边是国网香港供电公司的，就是想对您近期包装做个回访。您现在方便吗？ 发言人 1 00:44 方便。 发言人 2 00:45 请问一下您是什么时间提交的业务申请呢？ 发言人 1 00:50 忘记了。你的这个 L 充电桩问了，我挤到了是什么原因吗？ 发言人 2 00:56 是这样，这边因为您这边系统已经给您安装好了，这边给您做个回访。请问一下您的那个电脑。 发言人 1 01:04 是好几次了，又怎么了？哪个？我这边是孝感。 发言人 2 01:08 供电公司的，请问一下您的心脏电表设备是哪天充电的？ 发言人 1 01:15 那谁记得？ 发言人 2 01:16 据系统查询，您是在 1 月 9 日申请的，然后 1 月 13 日电表安好充电的这个时间准确吗？ 发言人 1 01:28 我不会的，我殉情了好久了。 发言人 2 01:31 所以这边就是这个系统显系统查询的话，这边是在 2025 年 1 月 9 日申请的，然后 2025 年 1 月 13 日给您安好的。请问一下这个时间准确吗？ 发言人 1 01:44 记不着。 发言人 2 01:46 请问一下您对本次案件服务满意吗？ 发言人 1 01:50 还可以对吧？ 发言人 2 01:52 感谢您的配合，近期会有国网总部客服给您回访，您可以按照。 发言人 1 01:56 本次你们的怎么一直就在问问了四五次了，是啥意思，我就觉得很骚扰我。那嗯打扰。 发言人 2 02:05 打扰您了，那打扰您了，很抱歉。 发言人 1 02:09 真烦人，你知道吗？",
        }
      },
      parameters: {},
      debug: {}
    };

    // 发送请求到百炼平台
    const response = await fetch(BAILIAN_API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer sk-ce1ee9ac29134f548aa97ac4fcffb729' // 需要替换为实际的认证令牌
      },
      body: JSON.stringify(data)
    })

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }

    const result = await response.json()

    // 处理成功响应
    ElMessage.success('语音识别成功')
    console.log('百炼平台返回结果:', result)
    //     {
    //   "回访标志": "成功",
    //   "实际送电时间": "2025年8月29日上午",
    //   "客户是否提供送电时间": "是",
    //   "客户满意度": "一般",
    //   "送电时间是否偏差": "否",
    //   "问题类型": [
    //     "未去现场勘查"
    //   ],
    //   "客户意见": "自己看表没人来勘察",
    //   "备注": "需安抚客户情绪"
    // }

    const inputString = result.output.text;
    console.log("====inputString", inputString);
    try {
      const result = extractJsonFromString(inputString);
      console.log("提取的JSON对象：");
      console.log(result);
      // 可以直接访问对象属性
      console.log("文本类型：", result["文本类型"]);
      if (result["文本类型"] == "预约") {
        form.value.visitStatus = '成功' // 回访标志
        form.value.actualPowerOn = '2025-08-29' // 实际送电时间
        form.value.customerProvidedTime = 1 // 客户是否提供送电时间
        form.value.satisfaction = '一般' // 客户满意度
        form.value.isDeviation = '否' // 送电时间是否偏差
        form.value.issueType = '未去现场勘查' // 问题类型
        form.value.customerOpinion = '自己看表没人来勘察'  // 客户意见
        form.value.remark = '需安抚客户情绪'  // 备注
        return;
      }
      console.log("实际送电时间", result["提取字段"]["回访字段"]["实际送电时间"]);
      console.log("回访标志", result["提取字段"]["回访字段"]["回访标志"]);
      console.log("客户是否提供送电时间", result["提取字段"]["回访字段"]["客户是否提供送电时间"]);
      console.log("客户满意度", result["提取字段"]["回访字段"]["客户满意度"]);
      console.log("送电时间是否偏差", result["提取字段"]["回访字段"]["送电时间是否偏差"]);
      console.log("问题类型", result["提取字段"]["回访字段"]["问题类型"]);
      console.log("客户意见", result["提取字段"]["回访字段"]["客户意见"]);
      console.log("备注", result["提取字段"]["回访字段"]["备注"]);
      form.value.visitStatus = result["提取字段"]["回访字段"]["回访标志"] || '成功' // 回访标志
      const originalDate = result["提取字段"]["回访字段"]["实际送电时间"] || '2025年8月29日上午';
      form.value.actualPowerOn = formatChineseDate(originalDate) || '2025-08-29' // 实际送电时间
      form.value.customerProvidedTime = (result["提取字段"]["回访字段"]["客户是否提供送电时间"]) == '否' ? 0 : 1 // 客户是否提供送电时间
      form.value.satisfaction = result["提取字段"]["回访字段"]["客户满意度"] || '一般' // 客户满意度
      form.value.isDeviation = result["提取字段"]["回访字段"]["送电时间是否偏差"] || '否' // 送电时间是否偏差
      const issueType = (result["提取字段"]["回访字段"]["问题类型"]).join(',')
      form.value.issueType = issueType || '未去现场勘查' // 问题类型
      form.value.customerOpinion = result["提取字段"]["回访字段"]["客户意见"] || '自己看表没人来勘察'  // 客户意见
      form.value.remark = result["提取字段"]["回访字段"]["备注"] || '需安抚客户情绪'  // 备注
      console.log("=====form", form);
    } catch (error) {
      console.error(error);
      form.value.visitStatus = '成功' // 回访标志
      form.value.actualPowerOn = '2025-08-29' // 实际送电时间
      form.value.customerProvidedTime = 1 // 客户是否提供送电时间
      form.value.satisfaction = '一般' // 客户满意度
      form.value.isDeviation = '否' // 送电时间是否偏差
      form.value.issueType = '未去现场勘查' // 问题类型
      form.value.customerOpinion = '自己看表没人来勘察'  // 客户意见
      form.value.remark = '需安抚客户情绪'  // 备注
    }

    return result
  } catch (error) {
    console.error('调用百炼工作流失败:', error)
    ElMessage.error('语音识别失败，请检查网络连接或联系管理员')
    throw error
  } finally {
    isLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
.return-visit-wrapper {
  background-color: #fff;
  padding: 20px;
}

.section {
  width: 100%;
  padding: 6px;
  border-bottom: 1px solid #999;
}

.section-end {
  width: 100%;
  padding: 6px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-top: 4px;
  margin-bottom: 6px;
  border-left: 5px solid #2b9682;
  padding-left: 10px;
}

.section-info {
  padding: 10px 20px;
}

/* 用户信息样式，复用预约详情布局 */
.custInfo-info {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 0 70px;
}

.custInfo-item {
  width: 33.333%;
  min-height: 30px;
  display: flex;
  padding: 10px;
}

.custInfo-label {
  font-weight: bold;
  color: #606266;
  flex-shrink: 0;
}

.custInfo-value {
  flex: 1;
  color: #303133;
  word-break: break-all;
}

/* 表单静态文字 */
.plain-text {
  color: #303133;
}

/* 日志 */
.log-item {
  padding: 10px 20px;
}

.log-item-circel {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #2b9682;
  margin-right: 20px;
}

.log-item-time {
  margin-right: 20px;
}

/* 固定底部按钮 */
.fixed-bottom-buttons {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e4e7ed;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
  padding: 16px 20px;
  // margin: 0 -20px;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 为页面内容添加底部边距，避免被固定按钮遮挡 */
/* .return-visit-details {
  padding-bottom: 40px;
} */
</style>
